<template>  
    <view class="show" >
    	三个活动正在进行中
    </view>
	<view class="isactive">
		<view class="zhaoxuan">
			招宣活动
		</view>
		<view class="mubiaoxing">
	        母校行
		</view>
	</view>
  <view class="container">  
	<view class="search-bar">  
      <input type="text" placeholder="请输入活动名称模糊查询" />    
    </view>  
    <view class="activity-list">  
      <view class="activity-item" v-for="(activity, index) in activities" :key="index" @click="choosePatient">  
        <view class="activity-title">活动名称 {{ index + 1 }}</view>  
<!--        <view class="activity-status">开放报名中</view> --> 
        <view class="activity-dates">  
          <view>计划开始日期：{{ activity.startDate }}  </view>
          <view>计划结束日期：{{ activity.endDate }}  </view>
        </view>  
        <view class="activity-location">活动区域：湖北省武汉市洪山区</view>  
        <view class="activity-group">活动牵头宣传组：宣传组名称{{ index + 1 }}</view>  
        <view class="activity-participants">  
          {{ activity.participants }}人已经参与活动，赶紧报名吧！  
        </view>  
    </view>  
   </view>
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      activities: [  
        {  
          startDate: '2023/03/29',  
          endDate: '2023/03/29',  
          participants: 28,  
        },  
        {  
          startDate: '2023/03/29',  
          endDate: '2023/03/29',  
          participants: 28,  
        },  
	  ],  
    };  
  },  
  methods: {
	   choosePatient() {
		  uni.navigateTo({
		  	url:'/pages/registered/reg'
		  })
	  }
  }
};  
</script>  
  
<style scoped> 
page {
	background-color: #efeff4;
}
 .show {
	 height: 35px;
	 background-color: #ffffcc;
	 text-align: center;
	 line-height: 35px;
	 color:#ffae4a;
 }
.isactive {
	display: flex;
	height: 50px;
	background-color: #fff;
}
.isactive .zhaoxuan {
	flex: 1;
	width: 50%;
	text-align: center;
	height: 50px;
	border-bottom:3px solid #007aff;
	line-height: 50px;
	color: #4974ff;
}
.isactive .mubiaoxing {
	flex: 1;
	width: 50%;
	text-align: center;
	height: 50px;
	/* border-bottom: #007aff; */
	line-height: 50px;
}
.container {  
  padding-right: 20px; 
   padding-left: 20px;
}  
.search-bar {  
  display: flex;  
  align-items: center;  
  background-color: #f0f0f0;  
  height: 50px;
  border-radius: 5px;  
  margin-bottom: 20px;  
  margin-top: 10px;
}  
.search-bar input {  
  flex: 1;  
  background-color: #fff;
  height: 40px;
  border-radius: 5px;
  padding-left: 5px;
}  

.activity-list {  
  margin-bottom: 20px;  
}  
.activity-item {  
  background-color: #fff;
margin-bottom: 20px;
height: 200px;
border-radius: 10px;
padding: 10px;
}  
.activity-dates {
	margin-top: 5px;
}
.activity-dates > view {
	color: #ababab;
}
 .activity-item view {
	 color: #ababab
 }
 .activity-item .activity-title{
	    font-size: 30px;
		color: #000;
 }
 .activity-participants {
	 font-size: 20px;
	 margin: 25px;
 }
</style>